<template>
  <div id="userLayout">
    <div class="login_panle">
      <div class="login_panle_form">
        <div class="login_panle_form_title">
          <p class="login_panle_form_title_p">注册账号</p>
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="rules"
          @keyup.enter="submitForm"
        >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名">
              <template #suffix>
                <i class="el-input__icon el-icon-user" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              :type="lock === 'lock' ? 'password' : 'text'"
              placeholder="请输入密码"
            >
              <template #suffix>
                <i
                  :class="'el-input__icon el-icon-' + lock"
                  @click="changeLock"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="correctPassword">
            <el-input
              v-model="loginForm.correctPassword"
              :type="lock === 'lock' ? 'password' : 'text'"
              placeholder="请确认密码"
            >
              <template #suffix>
                <i
                  :class="'el-input__icon el-icon-' + lock"
                  @click="changeLock"
                />
              </template>
            </el-input>
          </el-form-item>

          <!-- <el-form-item style="position: relative" prop="captcha">
            <el-input
              v-model="loginForm.captcha"
              name="logVerify"
              placeholder="请输入验证码"
              style="width: 60%"
            />
            <div class="vPic">
              <img
                v-if="picPath"
                :src="picPath"
                alt="请输入验证码"
                @click="loginVerify()"
              >
            </div>
          </el-form-item> -->
          <el-form-item style="">
            <el-button type="primary" style="width: 46%;" @click="toLogin"
              >返回登录</el-button
            >
            <el-button
              type="primary"
              style="width: 46%; margin-left: 8%"
              @click="submitForm"
              >注 册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="login_panle_right" />
      <div class="login_panle_foot">
        <div class="copyright">Copyright &copy; {{ curYear }} 💖</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { useRouter } from "vue-router";
import { register } from "@/api/user"

export default {
  name: "Login",
  setup() {
    const router = useRouter();
    function toLogin() {
      router.push("/login");
    }
    return {
      toLogin,
    };
  },
  data() {
    const checkUsername = (rule, value, callback) => {
      if (value.length < 5) {
        return callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const checkPassword = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error("请输入正确的密码"));
      } else {
        callback();
      }
    };
    const checkCorrectPassword = (rule, value, callback) => {
      console.log(value);
      if (value !== this.loginForm.password) {
        return callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      curYear: 0,
      lock: "lock",
      loginForm: {
        username: "",
        password: "",
        correctPassword: "",
      },
      rules: {
        username: [{ validator: checkUsername, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
        correctPassword: [{ validator: checkCorrectPassword, trigger: "blur" }],
      },
      logVerify: "",
      picPath: "",
    };
  },
  created() {
    this.curYear = new Date().getFullYear();
  },
  methods: {
    ...mapActions("user", ["LoginIn"]),
    async onRegister() {
      return await register(this.loginForm);
    },
    async submitForm() {
      this.$refs.loginForm.validate(async (v) => {
        if (v) {
          await this.onRegister();
        } else {
          this.$message({
            type: "error",
            message: "请正确填写登录信息",
            showClose: true,
          });
          return false;
        }
      });
    },
    changeLock() {
      this.lock = this.lock === "lock" ? "unlock" : "lock";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/newLogin.scss";
</style>
